/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState, useEffect } from 'react'
import styled from 'styled-components'

import { MdSpaceDashboard } from 'react-icons/md'
import { RiDashboard2Fill } from 'react-icons/ri'
import { FaAddressCard, FaTaxi } from 'react-icons/fa'
import { GiTwirlCenter } from 'react-icons/gi'
import { BsFillChatTextFill } from 'react-icons/bs'
import { IoSettings } from 'react-icons/io5'
import { FiLogOut } from 'react-icons/fi'
import { GiHamburgerMenu } from 'react-icons/gi'
import { VscChromeClose } from 'react-icons/vsc'
import scrollreveal from 'scrollreveal'

// 侧边栏组件
export default function Sidebar() {
  const [currentLink, setCurrentLink] = useState(1) // 默认选中第一项
  const [navbarState, setnavbarState] = useState(false) // 用来控制小尺寸下的navbar显隐 默认隐藏
  const html = document.querySelector('html')
  // 点击屏幕内任意位置时 都将隐藏掉当前navbar
  html.addEventListener('click', () => setnavbarState(false))

  // 初始化进入时加载动画
  useEffect(() => {
    const sr = scrollreveal({
      origin: 'left', // 动画初始方向
      distance: '80px', // 距离
      duration: 1000, // 持续时间
      reset: false, // 是否在视口进入时重新加载动画
    })
    sr.reveal(
      // 显示下方元素 从透明逐个显示
      `
      .brand,
      .links>ul>li:nth-of-type(1),
      .links>ul>li:nth-of-type(2),
      .links>ul>li:nth-of-type(3),
      .links>ul>li:nth-of-type(4),
      .links>ul>li:nth-of-type(5),
      .links>ul>li:nth-of-type(6),
      .logout
    `,
      {
        opacity: 0,
        interval: 300,
      }
    )
  }, [])

  return (
    <>
      <Section>
        <div className='top'>
          <div className='brand'>
            <FaTaxi />
            <span>Sing Taxi</span>
          </div>
          <div className='toggle'>
            {navbarState ? (
              <VscChromeClose onClick={() => setnavbarState(false)} />
            ) : (
              <GiHamburgerMenu
                onClick={(e) => {
                  e.stopPropagation()
                  setnavbarState(true)
                }}
              />
            )}
          </div>
          <div className='links'>
            <ul>
              <li
                className={currentLink === 1 ? 'active' : ''}
                onClick={() => setCurrentLink(1)}
              >
                <a href='#'>
                  <MdSpaceDashboard />
                  <span>仪表盘-Dashboard</span>
                </a>
              </li>
              <li
                className={currentLink === 2 ? 'active' : ''}
                onClick={() => setCurrentLink(2)}
              >
                <a href='#'>
                  <RiDashboard2Fill />
                  <span>用户信息-User</span>
                </a>
              </li>
              <li
                className={currentLink === 3 ? 'active' : ''}
                onClick={() => setCurrentLink(3)}
              >
                <a href='#'>
                  <FaAddressCard />
                  <span>支付详情-Pay</span>
                </a>
              </li>
              <li
                className={currentLink === 4 ? 'active' : ''}
                onClick={() => setCurrentLink(4)}
              >
                <a href='#'>
                  <GiTwirlCenter />
                  <span>资料管理-Learning</span>
                </a>
              </li>
              <li
                className={currentLink === 5 ? 'active' : ''}
                onClick={() => setCurrentLink(5)}
              >
                <a href='#'>
                  <BsFillChatTextFill />
                  <span>常见问题-FAQ</span>
                </a>
              </li>
              <li
                className={currentLink === 6 ? 'active' : ''}
                onClick={() => setCurrentLink(6)}
              >
                <a href='#'>
                  <IoSettings />
                  <span>选项设置-Setting</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className='logout'>
          <a href='#'>
            <FiLogOut />
            <span className='logout'>退出登录</span>
          </a>
        </div>
      </Section>
      {/* 标签身上的props用来在css中使用 */}
      <ResponsiveNav state={navbarState} className={navbarState ? 'show' : ''}>
        <div className='responsive__links'>
          <ul>
            <li
              className={currentLink === 1 ? 'active' : ''}
              onClick={() => setCurrentLink(1)}
            >
              <a href='#'>
                <MdSpaceDashboard />
                <span>仪表盘-Dashboard</span>
              </a>
            </li>
            <li
              className={currentLink === 2 ? 'active' : ''}
              onClick={() => setCurrentLink(2)}
            >
              <a href='#'>
                <RiDashboard2Fill />
                <span>用户信息-User</span>
              </a>
            </li>
            <li
              className={currentLink === 3 ? 'active' : ''}
              onClick={() => setCurrentLink(3)}
            >
              <a href='#'>
                <FaAddressCard />
                <span>支付详情-Pay</span>
              </a>
            </li>
            <li
              className={currentLink === 4 ? 'active' : ''}
              onClick={() => setCurrentLink(4)}
            >
              <a href='#'>
                <GiTwirlCenter />
                <span>资料管理-Learning</span>
              </a>
            </li>
            <li
              className={currentLink === 5 ? 'active' : ''}
              onClick={() => setCurrentLink(5)}
            >
              <a href='#'>
                <BsFillChatTextFill />
                <span>常见问题-FAQ</span>
              </a>
            </li>
            <li
              className={currentLink === 6 ? 'active' : ''}
              onClick={() => setCurrentLink(6)}
            >
              <a href='#'>
                <IoSettings />
                <span>选项设置-Setting</span>
              </a>
            </li>
          </ul>
        </div>
      </ResponsiveNav>
    </>
  )
}

const Section = styled.section`
  position: fixed;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0;
  gap: 2rem; // 行与列之间的间隙
  height: 100vh; // 高度为窗口大小
  width: 18vw; // 高度为窗口的18%
  background-color: #212121;
  .top {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* width: 100%; */
    .brand {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      gap: 2rem;
      svg {
        // 设置svg图标样式
        color: #ffc107;
        font-size: 2rem;
      }
      span {
        color: #ffc107;
        font-size: 2rem;
        font-family: 'Permanent Marker', cursive;
      }
    }
    .toggle {
      display: none;
    }
    .links {
      display: flex;
      justify-content: center;
      ul {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        li {
          padding: 0.6rem 0.8rem;
          border-radius: 0.6rem;
          transition: all 0.3s ease-in-out;
          cursor: pointer;
          &:hover {
            background-color: #ffc107;
            a {
              color: #000;
            }
          }
          a {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            text-decoration: none;
            color: #fff;
            span {
              letter-spacing: 0.05rem;
            }
          }
        }
        .active {
          // 当前选项被激活时的状态
          background-color: #ffc107;
          a {
            color: #000;
          }
        }
      }
    }
  }
  .logout {
    /* display: flex;
        align-items: center; */
    padding: 0.3rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    cursor: pointer;
    &:hover {
      background-color: #da0037;
    }
    a {
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #fff;
    }
  }

  /* 使用媒体查询动态设置sidebar */
  @media screen and (min-width: 280px) and (max-width: 1080px) {
    position: initial; // css的默认值 可能类似于static
    width: 100%;
    height: max-content; // 采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度
    padding: 1rem;
    .top {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 1rem;
      width: 100%;
      .toggle {
        display: block;
        color: #fff;
        z-index: 99;
        svg {
          font-size: 1.4rem;
        }
      }
      .brand {
        gap: 1rem;
        justify-content: flex-start;
      }
    }
    .top > .links,
    .logout {
      display: none;
    }
  }
`
// 适配屏幕的nav标签
const ResponsiveNav = styled.nav`
  position: fixed;
  right: -10vw;
  top: 0;
  z-index: 10;
  display: flex;
  opacity: 0;
  visibility: hidden; // 即使不可见的元素也会占据页面上的空间
  padding: 1rem;
  background-color: #000;
  height: 100vh;
  width: ${({ state }) => (state ? '70%' : '0%')};
  transition: all 0.4s ease-in-out;
  .responsive__links {
    ul {
      list-style-type: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 3rem;
      li {
        padding: 0.6rem 1rem;
        border-radius: 0.6rem;
        white-space: nowrap;
        user-select: none;
        &:hover {
          background-color: #ffc107;
          a {
            color: black;
          }
        }
        a {
          text-decoration: none;
          display: flex;
          gap: 1rem;
          color: white;
        }
      }
      .active {
        background-color: #ffc107;
        a {
          color: black;
        }
      }
    }
  }
`
